<?php include COMMON_PATH.'/index/header.html' ?>
<link rel="stylesheet" href="/index/js/swiper/swiper.min.css">
<link href="/index/js/libs/scroll-bar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
<link href="/index/css/live.css" rel="stylesheet" type="text/css"/>

<div class="main-content">
    <!--直播-->
    <div class="home-live-content clearfix">
        <div class="live-left-content ">
            <div class="top">
                <span class="btn-view-mini">培训时间</span>
                <p class="train-time"><?=$play['date']?>  <?=$play['start_time']?>-<?=$play['end_time']?></p>
            </div>
            <div class="train-brief-wrap ">
                <div class="train-brief-sm-wrap scroll-common-wrap">
                    <h3>课程简介</h3>
                    <p class=""><?=$play['introduction']?></p>
                </div>
            </div>
            <?php if(!empty($play['annex'])):?>
            <div class="slide-wrap swiper-container swiper-container-horizontal">
                <!-- Add Pagination -->
                <div class="top">
                    <span class="title">课件</span>
                    <div class="swiper-pagination swiper-pagination-fraction"><span class="swiper-pagination-current"></span>/<span class="swiper-pagination-total"></span></div>
                </div>
                <i class="icon-plus am-icon-search-plus"></i>
                <div class="swiper-wrapper">
                    <?php foreach($play['annex'] as $v):?>
                    <div class="swiper-slide swiper-slide-active" style="">
                        <img class="avatar" src="<?=$v?>" onerror = "iService.imgNoFind(this)" />
                    </div>
                    <?php endforeach;?>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <?php endif;?>
            <div class="code-wrap clearfix">
                <img class="code fl" src="/index/img/code-down.png" alt="">
                <div class="fr">
                    <p class="justify">扫一扫用手机观看</p>
                    <a href="javascript:void(0);"><span class="am-icon-apple">&nbsp;&nbsp;</span>App Store下载</a>
                    <a href="javascript:void(0);"><span class="am-icon-android">&nbsp;&nbsp;</span>Android下载</a>
                </div>
            </div>
        </div>
        <div class="live-mid-content ">
            <div class="top">
                <img class="avatar" src="<?=$play['avatar']?>"  onerror = "iService.imgNoFind(this)"><div class="info">
                <p class="tips"><span><?=$play['name']?></span>讲师：<span class="host-name"><?=$play['nickname']?></span></p>
                <p>
                    <?php if(!empty($play['volume'])):?>
                    <a href="/Question/answer?llid=<?=$play['llid']?>"><span class="icon-view-2">考试</span></a>
                    <?php endif;?>
                    <span class="icon-view-3">
                        <b>在线</b>
                        <i class="fans-num"><?=$play['click']?></i>
                    </span>
                    <span class="time-wrap">
                        已开播：<i class="time-tamp"><?=$play['play']?></i>
                    </span>
                </p>
                </div>
            </div>
            <div id="video-train">
                <?php if($video['url'][2]):?>
                <span class="icon-fullscreen"></span>
                <div class="tips-wrap"></div>
                <ul id="gift-show-wrap">
                    <li>
                        <img class="fans-avatar" src="flower_mark.png" alt="" />
                        <div class="fans-info">
                            <h3>Wakeup</h3>
                            <p>送一个鲜花</p>
                        </div>
                        <img class="gift-img" src="flower_mark.png" alt="" />
                        <span class="gift-num">X2</span>
                    </li>
                </ul>
                <?php else:?>
                <div class="playback-tips-wrap">
                    <!--<img class="avatar" src="<?=$play['avatar']?>"  onerror = "iService.imgNoFind(this)">
                    <p class="teach"><?=$info['name']?>:<?=$info['nickname']?></p>-->
                    <h3>直播已结束</h3>
                    <div class="back-info-wrap">
                        <div class="item">
                            <p class="content">00:35</p>
                            <p class="title">直播时长</p>
                        </div>
                        <div class="item">
                            <p class="content">123</p>
                            <p class="title">观看人数</p>
                        </div>
                    </div>
                </div>
                <?php endif;?>
            </div>
        </div>
        <div class="live-right-content">
            <div class="top">
                <?php if($play['share']):?>
                    <p>分享到微信：<a href="javascript:void(0)" class="am-icon-weixin"></a></p>
                <?php endif;?>
            </div>

            <div id="live-tab" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">聊天室</li>
                    <li>在线人员</li>
                </ul>
                <div class="comment-out-wrap">
                    <div class="comment-wrap scroll-common-wrap">
                        <ul class="comment-list-wrap clearfix">

                        </ul>
                    </div>
                    <div class="comment-tool-wrap">
                        <input placeholder="和大家一起讨论吧" id="send_msg_text" class="comment-input" type="text" />
                        <i class="fr" id="btn-send" onclick="onSendMsg(1);">发送</i>
                    </div>
                    <div class="gift-wrap">
                        <div class="gift-list">
                            <?php foreach($gift as $v):?><a data-cid="<?=$v['cid']?>" data-name="<?=$v['name']?>" class="gift-item " href="javascript:void(0);"><img onerror = "iService.imgNoFind(this)" src="<?=$v['image']?>" alt="" /></a><?php endforeach;?>
                        </div>
                        <i class="noselect" id="btn-gift-send">赠送<br />礼物</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include COMMON_PATH.'/index/footer.html' ?>
<script src="/index/js/libs/scroll-bar/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/index/js/swiper/swiper.min.js"></script>

<script type="text/javascript" src="/index/sdk/TcPlayer-2.2.0.js"></script>
<script type="text/javascript" src="/index/js/libs/qrcode.min.js"></script>

<script type="text/javascript">
    var avChatRoomId = "<?=$video['channel']?>";//群组ID
    //    function getLogInfo (){}     return loginInfo;

    //调用后台接口得到用户im信息以及视频状态
    var loginInfo = {
        'sdkAppID': "<?=$video['sdkAppID']?>", //用户所属应用id,必填
        'appIDAt3rd': "<?=$video['sdkAppID']?>", //用户所属应用id，必填
        'accountType': "<?=$video['accountType']?>", //用户所属应用帐号类型，必填
        'identifier': "<?=$video['udid']?>", //当前用户ID,必须是否字符串类型，选填
        'identifierNick': "<?=$video['nickname']?>", //当前用户昵称，选填
        'userSig': "<?=$video['tim']?>", //当前用户身份凭证，必须是字符串类型，选填
        'headurl': "<?=$video['avatar']?>", //当前用户默认头像，选填
    };

    var my_swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
//        autoplay:'1500',
        loop:true,
        paginationType: 'fraction'
    });
    var useravatar = "<?=$user['avatar']?>";


</script>
<script type="text/javascript" src="/index/sdk/webim.js?v=1"></script>
<script type="text/javascript" src="/index/sdk/json2.js"></script>
<script type="text/javascript" src="/index/js/im_group_notice.js"></script>
<script type="text/javascript" src="/index/js/im_base.js"></script>

<script>
    navActive(1);
    var scroll_Init = function(){
        var content=$(".scroll-common-wrap"),autoScrollTimer=500,autoScrollTimerAdjust;
        content.mCustomScrollbar({
            scrollButtons:{enable:false},
            callbacks:{
                whileScrolling:function(){
//                    autoScrollTimerAdjust=autoScrollTimer*this.mcs.topPct/100;
                },
                onScroll:function(){
                }
            }
        });
    };
    scroll_Init();

    var scrollAuto = function(now_wrap){
        $(now_wrap).mCustomScrollbar("scrollTo","bottom",{scrollInertia:500,scrollEasing:"easeInOutSmooth"});
    };

    var $gift_item = $('.gift-list a');
    $gift_item.on('click',function(){
        $(this).addClass('active').siblings('a').removeClass('active');
    });
    var llid = "<?=$play['llid']?>";
    var send_gift_btn = $("#btn-gift-send");
    var el_input_send = $('#send_msg_text');
    el_input_send.on('keydown',function(event){
        if (event.keyCode == 13)
        {
            onSendMsg(1);
        }
    });
    send_gift_btn.on("click",function(){
        if($(this).hasClass('disabled')){
            return false;
        }else {
            send_gift_btn.addClass('disabled');
            setTimeout(function(){
                send_gift_btn.removeClass('disabled');
            },300);
        }
        var $gift_active = $(".gift-list").find("a.active");
        var gift_src = $gift_active.find('img').attr('src');
        if($gift_active[0]){
            var cid = $gift_active.attr("data-cid");
        }else {
            alert("请先选择礼物");
            return false;
        }
        var gift_send_param = {
            url:'Course/giftSend',
            data:{
                llid:llid,
                cid:cid
            }
        };
        $.JsonRpc(gift_send_param,function(data){
            if(data.code==200){
//            : "已向主播送出礼物,24,大礼包,http://train.img.livestaring.com/gift/4.png",
                onSendMsg(8,'已向主播送出礼物'+','+data.content.cid+','+$gift_active.attr('data-name')+','+gift_src);
//                    $gift_active.removeClass("active");
            }else {
                alert(data.data.message);
            }
        });

    });


    $(function(){
        var live_status = "<?=$play['status']?>";

        if(live_status==2){
            var play_time = "<?=$play['play']?>";
            if(play_time!=''){
                iService.showTiming(play_time,$('.time-tamp')[0]);
            }
        }

        $(".comment-input").keydown(function(e) {
            if (e.keyCode == 13) {
                onSendMsg(1);
            }
        });
//         scrollAuto();

        layui.use(['element','layer', 'laypage', 'laydate'], function(){
            var layer = layui.layer //获得layer模块
                    ,laypage = layui.laypage //获得laypage模块
                    ,laydate = layui.laydate //获得laydate模块
                    ,element = layui.element;
            $('.icon-plus').on('click',function(){
                my_swiper.stopAutoplay();
                layer.open({
                    area: ['1000px', '700px'],
                    type: 1,
                    title: false,
                    resize: false,
                    shadeClose:false,
                    content: '<div class="swiper-pic-wrap">'+$('.swiper-slide-active').html()+'</div>',
                    success: function(layero, index){

                    },
                    cancel: function(index, layero){
                        my_swiper.startAutoplay();

                    }
                });
            });
            $('.am-icon-weixin').on('click',function(){
                layer.open({
                    area: ['300px', '300px'],
                    type: 1,
                    title: false,
                    resize: false,
                    shadeClose:false,
                    content: '<div class="code-share-wx-wrap"><div id="qrcode"  /><p>微信扫一扫分享到手机</p></div>',
                    success: function(){
                        var qrcode = new QRCode(document.getElementById("qrcode"), {
                            width : 120,
                            height : 120
                        });
                        qrcode.makeCode('http://'+'<?=$_SERVER["HTTP_HOST"]?>/Share/live/index?llid=<?=$play["llid"]?>');
                    }
                });
            });

            //回放 9代表回放  2代表直播   <?=$play['status']?>;
            var play_url = "<?=$video['url'][2]?>",
                flv_mp4 = "<?=$video['url'][1]?>",
                live_height = 712,
                live_width = 400;

            if(!play_url){
                $('.tips-wrap').html('直播已经结束，即将跳转回放列表').show();
                setTimeout(function(){
                    location.href = '/course/backlists';
                },2000);
                return false;
            }
            var player =  new TcPlayer('video-train', {
                rtmp: "",
                "m3u8": play_url,
                "flv":  flv_mp4, //增加了一个flv的播放地址，用于PC平台的播放
                "autoplay" : true,      //iOS下safari浏览器是不开放这个能力的
                "flash": false,
                "coverpic" : {"style": "cover", "src": "/index/img/cover.png"},
                "width" :  live_width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height" : live_height, //视频的显示高度，请尽量使用视频分辨率高度
                "controls":"no",
                "live": true,
                wording: {
                    2032: '请求视频失败，请检查网络',
                    2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
                },
                listener: function (msg) {
                    console.log(msg);
                    if(msg.type=='ended'){
                        $('.vcp-poster,.vcp-bigplay').hide();
                        $('.tips-wrap').html('直播已结束,2s后跳转到直播列表').show();
                        var time_total = 2;
                        function count_down(time_total){
                            var time_rest = time_total - 1;
                            if(time_rest<=0){
                                window.location.href = '/course/live';
                            }else {
                                setTimeout(function(){
                                    $('.tips-wrap').html('直播已结束,'+time_rest+'s后跳转到直播列表');
                                    count_down(time_rest);
                                },1000);
                            }
                        }
                        count_down(time_total);
                    }
//                    var play_btn = $(".play-btn");
                    function showPlayBtn (){
                        if(player.playing()){
                            play_btn.hide();
                        }else {
                            play_btn.show();
                            play_btn.on("click",function(){
                                player.play();
                                showPlayBtn();
                            });
                        }
                    }
//                    showPlayBtn();

                    var fullscreenBtn = $('.icon-fullscreen');
                    if(player.playing()){
                        fullscreenBtn.show();
                    }else {
                        fullscreenBtn.hide();
                    }
                    if(msg.type=="load"){
                        fullscreenBtn.off("lclick").on("click",function(){
                            if(!player.playing()){
                                return false;
                            }
                            player.fullscreen(true);
                        });
                    }

                }
            });

        });
    });
</script>
</html>